<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI易经出行 - 黄道吉日</title>
    <style>
        /* 全局样式 */
        body {
            font-family: '宋体', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #527486; /* 太师青-稳重 */
            color: #FFFFCC;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

        .container {
            width: 100%;
            max-width: 700px;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            overflow-y: auto;
        }

        /* 分隔线 */
        .divider {
            width: 100%;
            height: 5px;
            background-color: #9AC9D9; /* 云门色-祥云福佑 */
            margin: 10px 0;
        }

        /* 方向选择区域 */
        .direction-selector {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 10px;
            margin: 10px 0;
            width: 100%;
        }

        .direction-btn {
            padding: 10px 0;
            background-color: #0D4E77; /* 碧城色-优雅与沉静 */
            color: #FFFFCC;
            border: none;
            cursor: pointer;
            font-size: 16px;
            text-align: center;
            transition: background-color 0.3s;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .direction-btn:hover {
            background-color: #1a6ea0;
        }

        .direction-btn.active {
            background-color: #418683; /* 提夫尼蓝-尊贵 */
            font-weight: bold;
        }

        /* 结果显示区域 */
        .result-area {
            width: 100%;
            background-color: #0D4E77; /* 碧城色-优雅与沉静 */
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.2);
            padding-bottom: 10px;
        }

        .direction-title {
            font-size: 20px;
            font-weight: bold;
        }

        .jx-badge {
            padding: 5px 15px;
            border-radius: 15px;
            font-weight: bold;
            font-size: 18px;
            min-width: 50px;
            text-align: center;
        }

        .ji {
            background-color: #FFD700; /* 金色 */
            color: #000;
        }

        .xiong {
            background-color: #8B0000; /* 暗红色 */
            color: #FFF;
        }

        .result-content {
            margin: 10px 0;
            line-height: 1.6;
            font-size: 16px;
            min-height: 60px;
        }

        .jie-method {
            margin-top: 15px;
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            border-left: 4px solid #9AC9D9;
        }

        /* 功能区 */
        .function-area {
            width: 100%;
            background-color: #418683; /* 提夫尼蓝-尊贵 */
            padding: 15px;
            margin: 10px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 5px;
            box-sizing: border-box;
        }

        /* 输入框和按钮 */
        .input-group {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 10px 0;
        }

        .input-label {
            font-size: 14px;
            margin-bottom: 5px;
            text-align: center;
            width: 100%;
        }

        .input-row {
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            margin: 5px 0;
        }

        input[type="text"] {
            width: 75%;
            padding: 8px 10px;
            background-color: #0D4E77;
            color: #FFFFCC;
            border: none;
            font-size: 14px;
            border-radius: 4px;
            box-sizing: border-box;
        }

        button {
            padding: 8px 15px;
            background-color: #0D4E77;
            color: #FFFFCC;
            border: none;
            cursor: pointer;
            font-size: 14px;
            border-radius: 4px;
            min-width: 80px;
            text-align: center;
        }

        button:hover {
            background-color: #1a6ea0;
        }

        /* 时间信息 */
        .time-info {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            width: 100%;
            margin: 10px 0;
            padding: 10px;
            background-color: rgba(13, 78, 119, 0.5);
            border-radius: 5px;
            box-sizing: border-box;
        }

        .time-item {
            text-align: center;
            padding: 0 5px;
            border-right: 1px solid rgba(255, 255, 255, 0.2);
        }

        .time-item:last-child {
            border-right: none;
        }

        .time-label {
            font-size: 14px;
            margin-bottom: 5px;
        }

        .time-value {
            font-size: 16px;
            font-weight: bold;
        }

        /* 页眉页脚 */
        .header, .footer {
            text-align: center;
            padding: 5px;
            width: 100%;
            font-size: 16px;
            font-weight: bold;
        }

        /* 刷新按钮样式 */
        #refresh-btn {
            margin-top: 10px;
            background-color: #0D4E77;
            width: 150px;
        }

        /* 加载动画容器 */
        .loading-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页眉 -->
        <div class="header">抬头见喜</div>

        <!-- 上分隔线 -->
        <div class="divider"></div>

        <!-- 时间信息 -->
        <div class="time-info">
            <div class="time-item">
                <div class="time-label">当前时间</div>
                <div id="current-time" class="time-value">-</div>
            </div>
            <div class="time-item">
                <div class="time-label">农历时辰</div>
                <div id="shi-chen" class="time-value">-</div>
            </div>
            <div class="time-item">
                <div class="time-label">黄道信息</div>
                <div id="huang-dao" class="time-value">-</div>
            </div>
        </div>

        <!-- 方向选择 -->
        <div class="direction-selector">
            <button class="direction-btn" data-direction="东">东</button>
            <button class="direction-btn" data-direction="南">南</button>
            <button class="direction-btn" data-direction="西">西</button>
            <button class="direction-btn" data-direction="北">北</button>
            <button class="direction-btn" data-direction="东南">东南</button>
            <button class="direction-btn" data-direction="东北">东北</button>
            <button class="direction-btn" data-direction="西南">西南</button>
            <button class="direction-btn" data-direction="西北">西北</button>
        </div>

        <!-- 结果显示区域 -->
        <div class="result-area">
            <div class="result-header">
                <div class="direction-title">方向: <span id="selected-direction">请选择</span></div>
                <div id="jx-badge" class="jx-badge">-</div>
            </div>
            <div id="result-content" class="result-content">
                请选择一个方向查看吉凶信息
            </div>
            <div class="jie-method">
                <div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;">解挂方法:</div>
                <div id="jie-method" style="line-height: 1.5;">-</div>
            </div>
        </div>

        <!-- 功能区 -->
        <div class="function-area">
            <div class="input-group">
                <div class="input-label">可以通过姓名、QQ、邮箱、手机号、生日等信息进行精准推算</div>
                <div class="input-row">
                    <input type="text" id="info-input" placeholder="例如：姓名：红目香薰">
                    <button id="analyze-btn" onclick="analyzeData()">开始分析</button>
                </div>
            </div>
            <button id="refresh-btn" onclick="refreshData()">刷新数据</button>
        </div>

        <!-- 下分隔线 -->
        <div class="divider"></div>

        <!-- 页脚 -->
        <div class="footer">低头遇福</div>
    </div>

    <script type="module">
        import ApiService from './apiService.js';

        // 全局变量
        window.showTime = "";
        window.currentDirection = "";
        window.apiResult = null;

        // NTP客户端类
        class NTPClient {
            /**
             * 获取系统时间并转换为东八区时间
             * @returns {string} 返回当前时间的字符串表示
             */
            static getTime() {
                // 获取当前UTC时间
                const now = new Date();
                
                // 计算东八区时间（UTC+8）
                // 先获取UTC时间戳，然后加上8小时的毫秒数
                const utcTime = now.getTime();
                const beijingTime = new Date(utcTime + 8 * 3600000);
                
                // 格式化为 YYYY-MM-DD HH:MM:SS 格式
                const year = beijingTime.getUTCFullYear();
                const month = String(beijingTime.getUTCMonth() + 1).padStart(2, '0');
                const day = String(beijingTime.getUTCDate()).padStart(2, '0');
                const hours = String(beijingTime.getUTCHours()).padStart(2, '0');
                const minutes = String(beijingTime.getUTCMinutes()).padStart(2, '0');
                const seconds = String(beijingTime.getUTCSeconds()).padStart(2, '0');
                
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            }
        }

        /**
         * 将小时转换为对应的中文时辰
         * @param {number} hour - 小时数（0-23）
         * @returns {string} - 对应的中文时辰
         */
        function convertToChineseTimes(hour) {
            if (hour >= 23 || hour < 1) {
                return "子时";
            } else if (hour < 3) {
                return "丑时";
            } else if (hour < 5) {
                return "寅时";
            } else if (hour < 7) {
                return "卯时";
            } else if (hour < 9) {
                return "辰时";
            } else if (hour < 11) {
                return "巳时";
            } else if (hour < 13) {
                return "午时";
            } else if (hour < 15) {
                return "未时";
            } else if (hour < 17) {
                return "申时";
            } else if (hour < 19) {
                return "酉时";
            } else if (hour < 21) {
                return "戌时";
            } else {
                return "亥时";
            }
        }

        /**
         * 将小时和分钟转换为对应的中文时辰和刻度
         * @param {number} hour - 小时数（0-23）
         * @param {number} minute - 分钟数（0-59）
         * @returns {string} - 对应的中文时辰和刻度
         */
        function convertToChineseTime(hour, minute) {
            // 获取12时辰索引并转换为时辰名称
            const chineseHour = convertToChineseTimes(hour);

            let minuteMark;
            if (hour % 2 !== 0) {
                minuteMark = "上";
            } else {
                minuteMark = "下";
            }

            // 获取小时的刻度
            if (minute < 15) {
                minuteMark += "一刻";
            } else if (minute < 30) {
                minuteMark += "二刻";
            } else if (minute < 45) {
                minuteMark += "三刻";
            } else {
                minuteMark += "四刻";
            }

            // 返回格式化后的字符串
            return `${chineseHour}${minuteMark}`;
        }

        /**
         * 获取时辰和刻度
         * @param {number} hour - 小时数（0-23）
         * @param {number} minute - 分钟数（0-59）
         * @returns {string} - 对应的中文时辰和刻度
         */
        function getShiChen(hour, minute) {
            // 调用函数进行转换并返回结果
            return convertToChineseTime(hour, minute);
        }

        /**
         * 获取简单的黄道信息
         * @param {Date} date - 日期对象
         * @returns {string} - 黄道信息
         */
        function getHuangDaoInfo(date) {
            // 简单的黄道吉日判断（示例）
            const day = date.getDate();
            const month = date.getMonth() + 1;
            
            // 简单规则：月日之和为吉数（1, 3, 5, 7, 9, 11, 13）为黄道吉日
            const sum = day + month;
            if ([1, 3, 5, 7, 9, 11, 13].includes(sum % 14)) {
                return "黄道吉日";
            } else {
                return "黑道凶日";
            }
        }

        /**
         * 更新时间信息
         */
        function updateTimeInfo() {
            // 获取当前时间
            const currentTime = NTPClient.getTime();
            window.showTime = currentTime;
            
            // 解析时间
            const dateObj = new Date(currentTime.replace(' ', 'T'));
            const hour = dateObj.getHours();
            const minute = dateObj.getMinutes();
            
            // 更新时间显示
            document.getElementById('current-time').textContent = currentTime;
            
            // 获取时辰
            const shiChen = getShiChen(hour, minute);
            document.getElementById('shi-chen').textContent = shiChen;
            
            // 获取黄道信息
            const huangDao = getHuangDaoInfo(dateObj);
            document.getElementById('huang-dao').textContent = huangDao;
            
            return currentTime;
        }

        /**
         * 更新方向信息显示
         */
        function updateDirectionDisplay() {
            if (!window.apiResult || !window.currentDirection) {
                return;
            }
            
            document.getElementById('selected-direction').textContent = window.currentDirection;
            
            let jx, info, jie;
            
            // 检查API返回结果的格式
            if (window.apiResult.eight && window.apiResult.eight[window.currentDirection]) {
                // 旧版API格式
                jx = window.apiResult.eight[window.currentDirection].jx;
                info = window.apiResult.eight[window.currentDirection].info;
            } else {
                // 新版API格式
                jx = window.apiResult.jx;
                info = window.apiResult.info;
            }
            
            // 更新吉凶标志
            const jxBadge = document.getElementById('jx-badge');
            jxBadge.textContent = jx || '-';
            jxBadge.className = 'jx-badge';
            if (jx === "吉") {
                jxBadge.classList.add('ji');
            } else if (jx === "凶") {
                jxBadge.classList.add('xiong');
            }
            
            // 更新内容
            document.getElementById('result-content').textContent = info || '无详细信息';
            
            // 更新解挂方法
            jie = window.apiResult.jie || '-';
            document.getElementById('jie-method').textContent = jie;
        }

        /**
         * 锁定界面操作
         */
        function lockUI() {
            // 禁用所有按钮和输入框
            document.querySelectorAll('button, input').forEach(el => {
                el.disabled = true;
            });
            
            // 显示加载状态
            const resultContent = document.getElementById('result-content');
            resultContent.innerHTML = '<div style="text-align: center; padding: 20px;">正在分析中，请稍候...</div>';
            
            // 添加加载动画
            const loadingDiv = document.createElement('div');
            loadingDiv.id = 'loading-indicator';
            loadingDiv.style.textAlign = 'center';
            loadingDiv.style.padding = '20px';
            loadingDiv.innerHTML = `
                <div style="display: inline-block; width: 30px; height: 30px; border: 3px solid #FFFFCC; 
                border-radius: 50%; border-top-color: transparent; animation: spin 1s linear infinite;"></div>
                <style>
                    @keyframes spin {
                        to { transform: rotate(360deg); }
                    }
                </style>
            `;
            resultContent.appendChild(loadingDiv);
        }
        
        /**
         * 解锁界面操作
         */
        function unlockUI() {
            // 启用所有按钮和输入框
            document.querySelectorAll('button, input').forEach(el => {
                el.disabled = false;
            });
            
            // 移除加载动画
            const loadingIndicator = document.getElementById('loading-indicator');
            if (loadingIndicator) {
                loadingIndicator.remove();
            }
        }

        /**
         * 调用AI易经出行API并更新页面
         */
        window.aiYiJingChuXing = async function(userInfo, direction) {
            try {
                // 锁定界面
                lockUI();
                
                // 获取当前时间
                const currentTime = updateTimeInfo();
                
                // 组合用户信息、方向和时间
                const info = userInfo 
                    ? `${userInfo}，方向：${direction}，当前时间：${currentTime}` 
                    : `方向：${direction}，当前时间：${currentTime}`;
                
                console.log("发送信息:", info);
                
                // 调用API
                const result = await ApiService.callAiYiJingApi(info);
                console.log("API返回结果:", result);
                
                // 保存API结果
                window.apiResult = result;
                window.currentDirection = direction;
                
                // 更新黄道信息（如果API返回了相关信息）
                if (result.huangDao) {
                    document.getElementById('huang-dao').textContent = result.huangDao;
                }
                
                // 更新方向显示
                updateDirectionDisplay();
                
            } catch (error) {
                console.error("API调用失败:", error);
                alert("获取数据失败，请稍后再试");
            } finally {
                // 解锁界面
                unlockUI();
            }
        };

        /**
         * 刷新数据
         */
        window.refreshData = function() {
            if (window.currentDirection) {
                const userInfo = document.getElementById('info-input').value;
                aiYiJingChuXing(userInfo, window.currentDirection);
            } else {
                alert("请先选择一个方向");
            }
        };

        /**
         * 分析数据
         */
        window.analyzeData = function() {
            if (window.currentDirection) {
                const userInfo = document.getElementById('info-input').value;
                aiYiJingChuXing(userInfo, window.currentDirection);
            } else {
                alert("请先选择一个方向");
            }
        };

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 更新时间信息
            updateTimeInfo();
            
            // 每分钟更新一次时间
            setInterval(updateTimeInfo, 60000);
            
            // 为方向按钮添加点击事件
            const directionButtons = document.querySelectorAll('.direction-btn');
            directionButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除所有按钮的active类
                    directionButtons.forEach(btn => btn.classList.remove('active'));
                    
                    // 为当前按钮添加active类
                    this.classList.add('active');
                    
                    // 获取选择的方向
                    const direction = this.getAttribute('data-direction');
                    
                    // 获取用户信息
                    const userInfo = document.getElementById('info-input').value;
                    
                    // 调用API
                    aiYiJingChuXing(userInfo, direction);
                });
            });
        });
    </script>
</body>
</html>